<template>	 
	<div class="el-descriptions__header">
		<div class="el-descriptions__header_title">个人信息管理</div>
	    <el-button type="primary" @click="editVisible = true">修改个人信息</el-button>
	</div>

  <el-descriptions
    class="margin-top"
    :column="2"
    :size="large"
    border
  >

    <el-descriptions-item width="200px">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user />
          </el-icon>
          姓名
        </div>

      </template>
		<span>{{userData.name}}</span>
    </el-descriptions-item>
	
	<el-descriptions-item width="200px">
	  <template #label>
	    <div class="cell-item">
	      <el-icon :style="iconStyle">
	           <user />
	      </el-icon>
	      用户名
	    </div>
	  </template>
	   <span>{{userData.username}}</span>
	</el-descriptions-item>
    
	
	
    <el-descriptions-item width="200px">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <School />
          </el-icon>
          所属部门
        </div>
      </template>
      <span>{{faculty.description}}</span>
    </el-descriptions-item>
	
	
    <el-descriptions-item width="200px">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <Female />
          </el-icon>
          性别
        </div>
      </template>
      <span>{{userData.sex}}</span>
    </el-descriptions-item>
	
	
	<el-descriptions-item width="200px">
	  <template #label>
	    <div class="cell-item">
	      <el-icon :style="iconStyle">
	        <Tickets />
	      </el-icon>
	      政治面貌
	    </div>
	  </template>
	   <span>{{userData.politicsStatus}}</span>
	</el-descriptions-item>
	
	
    <el-descriptions-item width="200px">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <Iphone />
          </el-icon>
          联系方式
        </div>
      </template>
     <span>{{userData.telephone}}</span>
    </el-descriptions-item>
	
	<el-descriptions-item>
	  <template #label>
	    <div class="cell-item">
	      <el-icon :style="iconStyle">
			  <Memo />
	      </el-icon>
	      个人简介
	    </div>
	  </template>
	 <span v-html="userData.introduction"></span>
	</el-descriptions-item>
	
  </el-descriptions>
  

  <el-dialog v-model="editVisible" title="修改" width="60%" draggable>
    <el-form :model="form" label-width="80px" :rules="formRules"  class="demo-ruleForm">
        <el-form-item label="联系方式" prop="telephone">
          <el-input v-model="form.telephone" />
        </el-form-item>
        <el-form-item label="个人简介">
          <TEditor v-model="form.introduction"/>
        </el-form-item>
     </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editVisible = false" >取消</el-button>
        <el-button type="primary" @click="editSubmit()">提交</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>



<script setup>
	import {
	  Iphone,
	  Location,
	  OfficeBuilding,
	  Tickets,
	  User,
	} from '@element-plus/icons-vue'

	import {ref,toRefs,reactive,onMounted,getCurrentInstance,computed} from 'vue'
	
	import TEditor from '../components/TEditor.vue'
	
	let { proxy } = getCurrentInstance();
	
	//描述框的数据，初始为空
	let userData=ref({});
	
	//院系数据
	let faculty = ref({});
	
	//修改模态框中的数据
	let form = ref({});
	
	let editVisible = ref(false)
	
	//获取数据
	function getTableData(){
		proxy.$http.get(
		'/userFindById?id=' + window.sessionStorage.getItem("userId"),
		{"headers":{"token":window.sessionStorage.getItem("token")}})
		.then(res => {
			userData.value=res.data.data;//把获取的服务端数据数组传递给tableData
			faculty.value =res.data.data.faculty
			form.value.introduction=res.data.data.introduction
			form.value.telephone=res.data.data.telephone
			form.value.id=window.sessionStorage.getItem("userId")
			console.log(userData.value)
		})
		.catch(err => {
			console.log(err)
		});
	}
	
	//onMounted钩子函数，组件加载完自动执行
	onMounted(()=>{
		getTableData();  //请求第一页的表格数据
	});
	
	
	function editSubmit(){
		proxy.$http.put(
		'/userUpdateByStudent',
		form.value,
		{"headers":{"token":window.sessionStorage.getItem("token")}}
		)  ////按修改数据的接口组织url
		.then(res => {								
			editVisible.value = false	//关闭对话框		
			getTableData();  //更新表格数据
			form.value={}  //清空修改对象
			alert(res.data.message)	
		})
	}
	
	const formRules = reactive({
		telephone: [
		  {min: 11, max: 13, message: '长度在 11 到 13 个字符', trigger: 'blur'},  //长度校验
		]
	})

</script>

<style>
.el-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}

.el-descriptions__header {
  display: flex;
  align-items: center;
  font-size: 35px;
  font-weight: bold;
}

.el-descriptions__header_title{
	margin:0 auto;
}
</style>

